import styled from "./index.module.less";

import { useState, useCallback, useMemo } from "react";

import RiceText from "../../../../components/RiceText";

import FlieUpload from "../../../../components/FlieUpload";
import IndexTableWithBulkActionsExample from "./Tables";

import DateModalZuJ from "./DateModal";
import ListboxWithSearchExample from "./components/jilianxuanzeqis";
import FZModal from "./components/FZModal";

// import store from "../../../../store"
import { useSelector, useDispatch } from "react-redux";

import {
  MobileBackArrowMajor,
  ChevronLeftMinor,
  ChevronRightMinor,
  MobileVerticalDotsMajor,
  CalendarTimeMinor,
  InfoMinor,
  TemplateMajor,
  AddMajor,
} from "@shopify/polaris-icons";
import {
  Icon,
  Badge,
  Button,
  ButtonGroup,
  LegacyCard,
  TextField,
  Select,
  LegacyStack,
  Collapsible,
  Link,
  Popover,
  ActionList,
  Modal,
  ChoiceList,
  Listbox,
  Checkbox,
  Thumbnail,
} from "@shopify/polaris";
import {
  PostProductRiceTextApi,
  PostProductRiceTextTablesApi,
} from "../../../../api/product";
import { useEffect } from "react";

import _ from "lodash";

import Sortable from "./components/dragList";

import type { ResourceListProps } from "@shopify/polaris";
import TheadersModal from "../../../../components/TheadersModal";
import { TitleBC, URLBC } from "./indexstore";

import { showT, showF } from "../../../../layout/store";

const App = () => {
  const dispatch = useDispatch();
  const Store = useSelector((state: TheadersModal.state) => {
    return state.theadersModal.showModal;
  });
  const ProductRiceTextStore = useSelector((state: ProductRiceText.state) => {
    return state.ProductRiceText.title;
  });
  const StoreURL = useSelector((state: ProductRiceText.state) => {
    return state.ProductRiceText.URL;
  });

  const [RiceTextTableData, setRiceTextTableData] = useState(
    {} as PRODUCTMODULE.Spec_variants[]
  );

  const [show, setShow] = useState(false);

  const [showYMS, setShowYMS] = useState(false);
  const [YMSvalue, setYMSvalue] = useState("");
  const handleYMSChange = (newValue: string) => {
    setYMSvalue(newValue);
    if (newValue) {
      setShowYMS(true);
    } else {
      setShowYMS(false);
    }
  };

  const [activeFZModal, setActiveFZModal] = useState(false);

  const [riceText, setRiceText] = useState({} as PRODUCTMODULE.Items2);
  //.....
  const [spec_variants_Color, setSpec_variants_Color] = useState([
    { value: "", label: "" },
  ]);
  const [spec_variants_Size, setSpec_variants_Size] = useState([
    { value: "", label: "" },
  ]);
  //duoshuxin
  const [duoshuxin, setDuoshuxin] = useState(false);

  //日期Modal
  const [DateModal, setDateModal] = useState(false);

  //标题
  const [value, setValue] = useState("");
  const handleChange = (newValue: string) => {
    setValue(newValue);
    if (ProductRiceTextStore.name === newValue) {
      dispatch(showF());
    } else {
      dispatch(showT());
    }
  };

  //状态
  const [selected, setSelected] = useState("0");
  const handleSelectChange = (value: string) => {
    setSelected(value);
    if (String(ProductRiceTextStore.status) === value) {
      dispatch(showF());
    } else {
      dispatch(showT());
    }
  };

  const options = [
    { label: "活跃", value: "1" },
    { label: "草稿", value: "0" },
  ];

  //产品类型
  const [popoverActive, setPopoverActive] = useState(false);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    []
  );

  const [chanpin, setChanpin] = useState("");

  const handlechanpinChange = useCallback(
    (newValue: string) => setChanpin(newValue),
    []
  );

  const [chanpinLX, setChanpinLX] = useState("");

  const handlechanpinChangeLX = useCallback(
    (newValue: string) => setChanpinLX(newValue),
    []
  );

  const [chanpinCS, setChanpinCS] = useState("");

  const handlechanpinChangeCS = useCallback(
    (newValue: string) => setChanpinCS(newValue),
    []
  );
  const [chanpinBQ, setChanpinBQ] = useState("");

  const handlechanpinChangeBQ = useCallback(
    (newValue: string) => setChanpinBQ(newValue),
    []
  );

  const activator = (
    <div onClick={togglePopoverActive}>
      <TextField
        label=""
        value={chanpin}
        onChange={handlechanpinChange}
        autoComplete="off"
      />
    </div>
  );

  //icon
  const iconContent = () => {
    return (
      <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="4" />
      </svg>
    );
  };

  //搜索引擎产品页面
  const [open, setOpen] = useState(false);

  const handleToggle = useCallback(() => setOpen((open) => !open), []);

  const [showCreateUrl, setShowCreateUrl] = useState(false);
  //valueURL
  const [valueURL, setValueURL] = useState(``);

  const handleValueURLChange = (newValue: string) => {
    setValueURL(newValue);
    if (StoreURL == newValue) {
      dispatch(showF());
      setShowCreateUrl(false);
    } else {
      dispatch(showT());
      setShowCreateUrl(true);
    }
  };

  //drap ___ mock
  const [mocks, setMocks] = useState(false);
  const mock = [
    {
      title: "尺寸",
      need: ["大"],
    },
    {
      title: "材料",
      need: ["橡胶", "啊啊"],
    },
  ];

  const [list, setList] = useState(() =>
    mock.map((item, index) => ({
      key: String(index + 1),
      children: item,
    }))
  );
  //正在发布ZZFB
  const [popoverActiveZZFB, setPopoverActiveZZFB] = useState(false);

  const togglePopoverActiveZZFB = useCallback(
    () => setPopoverActiveZZFB((popoverActiveZZFB) => !popoverActiveZZFB),
    []
  );

  const activatorZZFB = (
    <div onClick={togglePopoverActiveZZFB}>
      <Icon color="subdued" source={MobileVerticalDotsMajor}></Icon>
    </div>
  );

  //ZZFB Modal 渠道
  const [expandedQD, setExpandedQD] = useState(true);
  const [ModalQD, setModalQD] = useState(false);

  const handleModalQDChange = useCallback(
    () => setModalQD(!ModalQD),
    [ModalQD]
  );

  const [MQDSelected, setMQDSelected] = useState<string[]>([
    "shipping",
    "confirmation",
  ]);

  const handleMQDChange = useCallback((value: string[]) => {
    setMQDSelected(value);
    if (value.length >= 2) {
      setExpandedQD(true);
    } else {
      setExpandedQD(false);
    }
  }, []);

  //ZZFB Modal 市场
  const [expanded, setExpanded] = useState(true);
  const [ModalSC, setModalSC] = useState(false);

  const handleModalSCChange = useCallback(
    () => setModalSC(!ModalSC),
    [ModalSC]
  );

  const [MSCSelected, setMSCSelected] = useState<string[]>([
    "shipping",
    "confirmation",
  ]);

  const handleMSCChange = useCallback((value: string[]) => {
    setMSCSelected(value);
    if (value.length >= 2) {
      setExpanded(true);
    } else {
      setExpanded(false);
    }
  }, []);

  const [MTWJs, setMTWJs] = useState([] as PRODUCTMODULE.Attachments[]);

  const ProductRT = () => {
    PostProductRiceTextApi({
      format: "json",
      method: "get.product.item",
      product_id: JSON.parse(localStorage.getItem("productRiceText") as string),
      sign: "4b6f78dac959124e914096444fe9ca47",
      store_locale: "en_US",
      timestamp: 1691552064,
      token: "9d486d74d765e9b033ee6f667d137a0a",
    }).then((res) => {
      setMTWJs(res.data.attachment);
      setRiceText(res.data);
      setValue(res.data.name);
      setValueURL(`https://3000.com/order/product/${res.data.name}`);
      dispatch(URLBC(`https://3000.com/order/product/${res.data.name}`));
      dispatch(TitleBC(res.data));
      setSelected(String(res.data.status));
    });
  };

  const ProductRiceTables = () => {
    PostProductRiceTextTablesApi({
      format: "json",
      key_to_array: 1,
      method: "get.product.spec.config",
      product_id: JSON.parse(localStorage.getItem("productRiceText") as string),
      sign: "b120200c72269fac86ed85faa1d3807a",
      store_locale: "en_US",
      timestamp: 1691715884,
      token: "9d486d74d765e9b033ee6f667d137a0a",
    }).then((res) => {
      // console.log(res);
      setRiceTextTableData(
        res.data.spec_variants.map((item, index) => {
          return {
            id: String(item.variant_id),
            ...item,
          };
        })
      );
      setSpec_variants_Color(
        _.uniqWith(
          res.data.spec_variants.map((item, index) => {
            return {
              label: item.product_sku.split("-")[1],
              value: String(item.key_name[0]),
            };
          }),
          _.isEqual
        )
      );
      setSpec_variants_Size(
        _.uniqWith(
          res.data.spec_variants.map((item, index) => {
            return {
              label: item.product_sku.split("-")[2],
              value: String(item.key_name[1]),
            };
          }),
          _.isEqual
        )
      );
      setShow(true);
      // console.log(res.data.spec_variants);
    });
  };


  useEffect(() => {
    setShow(false);
    ProductRT();
    ProductRiceTables();

    // GetNationSS();
  }, []);

  const [activeFS, setActiveFS] = useState(false);

  const toggleActiveFS = useCallback(
    () => setActiveFS((active) => !active),
    []
  );

  const handleImportedAction = useCallback(
    () => console.log("Imported action"),
    []
  );

  const handleExportedAction = useCallback(
    () => console.log("Exported action"),
    []
  );

  const activatorFS = (
    <div>
      <Button onClick={toggleActiveFS} size="slim" disclosure>
        分享
      </Button>
    </div>
  );

  //选择框
  const deselectedOptions = useMemo(
    () => [
      { value: "rustic", label: "Rustic" },
      { value: "antique", label: "Antique" },
      { value: "vinyl", label: "Vinyl" },
      { value: "vintage", label: "Vintage" },
      { value: "refurbished", label: "Refurbished" },
    ],
    []
  );

  const [selectedOption, setSelectedOption] = useState<string | undefined>();
  const [inputValue, setInputValue] = useState("");
  const [optionsA, setOptionsA] = useState(deselectedOptions);

  const updateText = useCallback(
    (value: string) => {
      setInputValue(value);
      if (value === "") {
        setOptionsA(deselectedOptions);
        return;
      }

      const filterRegex = new RegExp(value, "i");
      const resultOptions = deselectedOptions.filter((option) =>
        option.label.match(filterRegex)
      );
      setOptionsA(resultOptions);
    },
    [deselectedOptions]
  );

  const updateSelection = useCallback(
    (selected: string) => {
      const matchedOption = optionsA.find((option) => {
        return option.value.match(selected);
      });

      setSelectedOption(selected);
      setInputValue((matchedOption && matchedOption.label) || "");
    },
    [optionsA]
  );

  const optionsMarkup =
    optionsA.length > 0
      ? optionsA.map((option) => {
          const { label, value } = option;
          return (
            <Listbox.Option
              key={`${value}`}
              value={value}
              selected={selectedOption === value}
              accessibilityLabel={label}
            >
              {label}
            </Listbox.Option>
          );
        })
      : null;
  //checkboxURL
  const [checkedURL, setCheckedURL] = useState(true);
  const handleChangeURLXZ = useCallback(
    (newChecked: boolean) => setCheckedURL(newChecked),
    []
  );

  const [TJQTXX, setTJQTXX] = useState(true);
  //upload

  return (
    <div className={styled.box}>
      <div className={styled.header}>
        <div className={styled.headerL}>
          <div>
            <Button
              icon={MobileBackArrowMajor}
              size="slim"
              plain
              textAlign="center"
              url="/product"
            ></Button>
          </div>
          <div className={styled.h1}>{riceText.name}</div>
          <div>
            {
              [
                <Badge status="info">草稿</Badge>,
                <Badge status="success">活跃</Badge>,
              ][riceText.status]
            }
          </div>
        </div>
        <div className={styled.headerR}>
          <div>
            <Button
              size="slim"
              onClick={() => {
                setActiveFZModal(true);
              }}
            >
              复制
            </Button>
          </div>
          <div className={styled.btn}>
            <Button size="slim">查看</Button>
          </div>
          <div>
            <Popover
              active={activeFS}
              activator={activatorFS}
              autofocusTarget="first-node"
              onClose={toggleActiveFS}
            >
              <ActionList
                actionRole="menuitem"
                items={[
                  {
                    content: "复制链接",
                    onAction: handleImportedAction,
                    prefix: (
                      <div>
                        <span className="iconfont icon-lianjie"></span>
                      </div>
                    ),
                  },
                  {
                    content: "Facebook",
                    onAction: handleExportedAction,
                    prefix: (
                      <div>
                        <span className="iconfont icon-facebook"></span>
                      </div>
                    ),
                  },
                  {
                    content: "Twitter",
                    onAction: handleExportedAction,
                    prefix: (
                      <div>
                        <span className="iconfont icon-twitter"></span>
                      </div>
                    ),
                  },
                  {
                    content: "Reddit",
                    onAction: handleExportedAction,
                    prefix: (
                      <div>
                        <span className="iconfont icon-reddit"></span>
                      </div>
                    ),
                  },
                  {
                    content: "Linkedin",
                    onAction: handleExportedAction,
                    prefix: (
                      <div>
                        <span className="iconfont icon-linkedin-fill"></span>
                      </div>
                    ),
                  },
                  {
                    content: "Pinterest",
                    onAction: handleExportedAction,
                    prefix: (
                      <div>
                        <span className="iconfont icon-pinterest"></span>
                      </div>
                    ),
                  },
                ]}
              />
            </Popover>
          </div>
          <div className={styled.btn}>
            <ButtonGroup segmented>
              <Button size="slim" icon={ChevronLeftMinor}></Button>
              <Button size="slim" icon={ChevronRightMinor}></Button>
            </ButtonGroup>
          </div>
        </div>
      </div>
      <div className={styled.body}>
        <div className={styled.bodyL}>
          <LegacyCard sectioned>
            <div className={styled.biaoti}>标题</div>
            <TextField
              label=""
              value={value}
              onChange={handleChange}
              autoComplete="off"
            />
            <div className={styled.miaoshu}>描述</div>
            <div className={styled.Ricetext}>
              {riceText.content && (
                <RiceText content={riceText.content} MTWJs={MTWJs} />
              )}
            </div>
          </LegacyCard>

          <LegacyCard sectioned>
            <div className={styled.biaoti}>媒体文件</div>
            <div className={styled.meiti}>
              <div className={styled.THUMB}>
                <div className={styled.THUMBtop}>
                  {MTWJs.map((item, index) => {
                    if (index === 0) {
                      return (
                        <div key={index} className={styled.Thumbnail1}>
                          <img
                            src={"https://" + item.source}
                            alt="Black choker necklace"
                            style={{ width: "260px", height: "260px" }}
                          />
                        </div>
                      );
                    }
                  })}
                </div>
                <div className={styled.THUMBfooter}>
                  {MTWJs.map((item, index) => {
                    if (index === 0) {
                    } else {
                      return (
                        <div key={index} className={styled.Thumbnail}>
                          <img
                            src={"https://" + item.source}
                            alt="Black choker necklace"
                            style={{ width: "120px", height: "120px" }}
                          />
                        </div>
                      );
                    }
                  })}
                  <div className={styled.Thumbnail}>
                    <FlieUpload />
                  </div>
                </div>
              </div>
            </div>
          </LegacyCard>

          <LegacyCard sectioned>
            <div className={styled.biaoti}>多属性</div>
            <div>
              <Sortable list={list} setList={setList}></Sortable>
            </div>

            {TJQTXX && (
              <div className={styled.TJQT}>
                <div>
                  <Icon source={AddMajor} color="highlight"></Icon>
                </div>
                <div>
                  <Button
                    onClick={() => {
                      setList([
                        ...list,
                        { key: "3", children: { title: "", need: [] } },
                      ]);
                      setTJQTXX(false);
                    }}
                    plain
                  >
                    添加其他选项
                  </Button>
                </div>
              </div>
            )}
            <div>
              {/* 组件Table */}
              {show && (
                <IndexTableWithBulkActionsExample
                  RiceTextTableData={RiceTextTableData}
                  spec_variants_Color={spec_variants_Color}
                  spec_variants_Size={spec_variants_Size}
                />
              )}
              {/* 组件 */}
            </div>
          </LegacyCard>
          <LegacyCard sectioned>
            <div className={styled.Search}>
              <div className={styled.SSYQ}>搜索引擎产品页面</div>
              <div>
                {!open && (
                  <Button
                    plain
                    onClick={handleToggle}
                    ariaExpanded={open}
                    ariaControls="basic-collapsible"
                  >
                    编辑
                  </Button>
                )}
              </div>
            </div>
            {!showYMS && (
              <div>添加说明，以模拟产品在搜索引擎排名中的显示样式</div>
            )}
            {showYMS && (
              <div>
                <div style={{ fontSize: "18px", color: "#1A0DAB" }}>
                  {value}
                </div>
                <div style={{ fontSize: "13px", color: "#006621" }}>
                  {valueURL}
                </div>
                <div style={{ fontSize: "13px", color: "#545454" }}>
                  {YMSvalue}
                </div>
              </div>
            )}
            <div>
              <LegacyCard sectioned>
                <LegacyStack vertical>
                  <Collapsible
                    open={open}
                    id="basic-collapsible"
                    transition={{
                      duration: "500ms",
                      timingFunction: "ease-in-out",
                    }}
                    expandOnPrint
                  >
                    <div className={styled.YMBT}>页面标题</div>
                    <div>
                      <TextField
                        label=""
                        value={value}
                        onChange={handleChange}
                        autoComplete="off"
                      />
                    </div>
                    <div className={styled.MIAOSHU}>使用的字符长度{2}/70</div>
                    <div className={styled.YMBT}>元描述</div>
                    <div>
                      <TextField
                        label=""
                        value={YMSvalue}
                        onChange={handleYMSChange}
                        autoComplete="off"
                        multiline={4}
                      />
                    </div>
                    <div className={styled.MIAOSHU}>使用的字符长度{0}/320</div>
                    <div className={styled.YMBT}>URL handle</div>
                    <div>
                      <TextField
                        label=""
                        value={valueURL}
                        onChange={handleValueURLChange}
                        autoComplete="off"
                      />
                    </div>
                    {showCreateUrl && (
                      <div>
                        <Checkbox
                          label={
                            <div style={{ fontSize: "13px" }}>
                              创建 &nbsp;
                              <span style={{ backgroundColor: "yellow" }}>
                                {value}&nbsp;
                              </span>
                              到
                              <span style={{ backgroundColor: "yellow" }}>
                                &nbsp;{valueURL.slice(31)}&nbsp;
                              </span>
                              的 URL 重定向
                            </div>
                          }
                          checked={checkedURL}
                          onChange={handleChangeURLXZ}
                        />
                      </div>
                    )}
                  </Collapsible>
                </LegacyStack>
              </LegacyCard>
            </div>
          </LegacyCard>
        </div>
        <div className={styled.bodyR}>
          <LegacyCard sectioned>
            <div className={styled.zhuangtai}>状态</div>
            <LegacyCard.Section>
              <Select
                label=""
                options={options}
                onChange={handleSelectChange}
                value={selected}
              />
            </LegacyCard.Section>
          </LegacyCard>
          <LegacyCard sectioned>
            <div className={styled.nowF}>
              <div>正在发布</div>
              <div>
                <Popover
                  active={popoverActiveZZFB}
                  activator={activatorZZFB}
                  autofocusTarget="first-node"
                  onClose={togglePopoverActiveZZFB}
                >
                  <ActionList
                    actionRole="menuitem"
                    items={[
                      {
                        content: "管理销售渠道",
                        onAction: () => {
                          setModalQD(true);
                        },
                      },
                      {
                        content: "管理市场",
                        onAction: () => {
                          setModalSC(true);
                        },
                      },
                    ]}
                  />
                </Popover>
              </div>
            </div>
            <div className={styled.xsqd}>销售渠道</div>
            <div className={styled.zxsd}>
              <div className={styled.zaixian}>
                <Icon source={iconContent} color="primary" />
                在线商店
              </div>
              <div
                style={{ cursor: "pointer" }}
                onClick={() => {
                  setDateModal(true);
                }}
              >
                <Icon source={CalendarTimeMinor} color="subdued"></Icon>
              </div>
            </div>
            <div className={styled.FRWS}>
              <div>
                <Icon source={iconContent} color="primary" />
              </div>
              <div>Fox Reviews</div>
            </div>
            <div className={styled.xsqd}>市场</div>
            <div className={styled.FRWS}>
              <div>
                <Icon source={iconContent} color="primary" />
              </div>
              <div>China 和 International</div>
            </div>
          </LegacyCard>
          <LegacyCard sectioned>
            <div className={styled.DC}>洞察</div>
            <div>产品最近进行过销售时会显示洞察</div>
          </LegacyCard>
          <LegacyCard sectioned>
            <div className={styled.CPZL}>
              <div className={styled.cpzl}>产品整理</div>
              <div>
                <Icon source={InfoMinor}></Icon>
              </div>
            </div>
            <div className={styled.CPLB}>产品类别</div>
            <div>
              <div>
                {/* jilian组件 */}
                <ListboxWithSearchExample />
                {/* jilian组件 */}
              </div>
            </div>
            <div className={styled.CPLX}>产品类型</div>
            <div>
              <TextField
                label=""
                value={chanpinLX}
                onChange={handlechanpinChangeLX}
                autoComplete="off"
              />
            </div>
            <div className={styled.CS}>厂商</div>
            <div>
              <TextField
                label=""
                value={chanpinCS}
                onChange={handlechanpinChangeCS}
                autoComplete="off"
              />
            </div>
            <div className={styled.context}>
              没有适合添加此产品的产品系列。您可以添加新的产品系列或修改现有的产品系列。
              <Link url="/">编辑产品系列</Link>
            </div>
            <div className={styled.BQ}>
              <div>标签</div>
              <div>
                <Button plain>管理</Button>
              </div>
            </div>
            <div>
              <TextField
                label=""
                value={chanpinBQ}
                onChange={handlechanpinChangeBQ}
                autoComplete="off"
              />
            </div>
          </LegacyCard>
          <LegacyCard sectioned>
            <div className={styled.ZXSD}>在线商店</div>
            <div className={styled.MBYS}>模板样式</div>
            <div>
              <Select
                label=""
                disabled
                options={[{ label: "默认产品", value: "today" }]}
              />
            </div>
            <div className={styled.ZDYMB}>
              <div>
                <Icon source={TemplateMajor} color="highlight"></Icon>
              </div>
              <div>
                <Link url="/">自定义模板</Link>
              </div>
            </div>
          </LegacyCard>
        </div>
      </div>
      <div className={styled.footer}>
        <div>
          <Button size="slim">将产品存档</Button>
        </div>
        <div className={styled.middle}>
          <Button size="slim" destructive>
            删除产品
          </Button>
        </div>
        <div>
          <Button size="slim" primary>
            保存
          </Button>
        </div>
      </div>

      {/* 组件 */}
      {DateModal && (
        <DateModalZuJ DateModal={DateModal} setDateModal={setDateModal} />
      )}
      {/* //ZZFB Modal 渠道 */}
      {ModalQD && (
        <Modal
          open={ModalQD}
          onClose={handleModalQDChange}
          title="管理销售渠道"
          primaryAction={{
            content: "完成",
            onAction: handleModalQDChange,
          }}
          secondaryActions={[
            {
              content: "取消",
              onAction: handleModalQDChange,
            },
          ]}
        >
          <Modal.Section>
            <div className={styled.tooplit}>
              <div>
                <Button
                  onClick={() => {
                    setExpandedQD(!expandedQD);
                    if (expandedQD == true) {
                      setMQDSelected([]);
                    } else {
                      setMQDSelected(["shipping", "confirmation"]);
                    }
                  }}
                  plain
                >
                  {expandedQD ? "取消全选" : "全选"}
                </Button>
              </div>
              <div>已选择 {MSCSelected.length} 个，共 2 个</div>
            </div>
            <ChoiceList
              allowMultiple
              title=""
              choices={[
                {
                  label: "在线商店",
                  value: "shipping",
                },
                {
                  label: "Fox Reviews",
                  value: "confirmation",
                },
              ]}
              selected={MQDSelected}
              onChange={handleMQDChange}
            />
          </Modal.Section>
        </Modal>
      )}
      {/* //ZZFB Modal 市场  */}
      {ModalSC && (
        <Modal
          open={ModalSC}
          onClose={handleModalSCChange}
          title="管理市场"
          primaryAction={{
            content: "完成",
            onAction: handleModalSCChange,
          }}
          secondaryActions={[
            {
              content: "取消",
              onAction: handleModalSCChange,
            },
          ]}
        >
          <Modal.Section>
            <div className={styled.tooplit}>
              <div>
                <Button
                  onClick={() => {
                    setExpanded(!expanded);
                    if (expanded == true) {
                      setMSCSelected([]);
                    } else {
                      setMSCSelected(["shipping", "confirmation"]);
                    }
                  }}
                  plain
                >
                  {expanded ? "取消全选" : "全选"}
                </Button>
              </div>
              <div>已选择 {MSCSelected.length} 个，共 2 个</div>
            </div>
            <ChoiceList
              allowMultiple
              title=""
              choices={[
                {
                  label: "主要市场",
                  value: "shipping",
                  helpText: "中国",
                },
                {
                  label: "International",
                  value: "confirmation",
                  helpText: "阿尔及利亚，阿尔巴尼亚 和 其他 234 个",
                },
              ]}
              selected={MSCSelected}
              onChange={handleMSCChange}
            />
          </Modal.Section>
          <Modal.Section>
            <div style={{ color: "#616161", fontSize: "12px" }}>
              您在市场中执行的更改将仅应用于您的在线商店。
            </div>
          </Modal.Section>
        </Modal>
      )}
      {/* 组件 */}
      {Store && <TheadersModal />}
      {activeFZModal && (
        <FZModal active={activeFZModal} setActive={setActiveFZModal} />
      )}
    </div>
  );
};

export default App;
